<template>
  <div v-show="memoney" :memoney="memoney">
    <h2 @click="move">关闭</h2>
    <h2>BABA有存款{{ money }}</h2>
    <button @click="BorrowMoney(100)">找小明借钱100</button>
    <button @click="BorrowMoney(150)">找小美借钱150</button>
    <button @click="BorrowMoneyAll(200)">找所有孩子借钱200</button>
    <br />
    <!-- ref 获取节点(组件标签) -->
    <Son ref="xm" />
    <br />
    <Daughter ref="xh" />
  </div>
</template>

<script>
import Son from "./Baby/Son.vue";
import Daughter from "./Baby/Daughter.vue";
export default {
  name: "ChildrenParentTest",
  props: { memoney: { type: Boolean, default: false } },
  data() {
    return {
      money: 1000,
    };
  },
  components: { Son, Daughter },
  methods: {
    BorrowMoney(money) {
      // 父组件累加一百块
      this.money += money;
      // ref可以获取到真实DOM节点,也可以获取到子组件标签(操作子组件的数据与方法)
      this.$refs.xm.money -= money;
    },
    BorrowMoney(money) {
      this.money += money;
      this.$refs.xh.money -= money;
    },
    BorrowMoneyAll(money) {
      this.money += 2 * money;
      // 组件实例中有一个属性$children,可以获取到当前组件所有子组件身上的属性
      this.$children.forEach((item) => {
        item.money -= 200;
      });
    },
    move() {
      this.$emit("jjj");
    },
  },
};
</script>

<style>
</style>